﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Register.aspx.cs" Inherits="ProjectStudy.注册登录找回密码修改密码页面.Register" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/jquery-1.4.1.js" type="text/javascript"></script>

    <%--弹窗--%>
    <script src="/Scripts/zeroModal.js" type="text/javascript"></script>
    <script src="/Scripts/zeroModal.min.js" type="text/javascript"></script>
        <%--弹窗--%>
    <%--<link href="Styles/htmleaf-demo.css" rel="stylesheet" type="text/css" />--%>
    <link href="/Styles/normalize.css" rel="stylesheet" type="text/css" />
    <link href="/Styles/zeroModal.css" rel="stylesheet" type="text/css" />

      <%--复选框、单选框--%>
    <script src="/Scripts/checkbix.js" type="text/javascript"></script>
    <script src="/Scripts/checkbix.min.js" type="text/javascript"></script>
    <link href="/Styles/checkbix.css" rel="stylesheet" type="text/css" />
    <link href="/Styles/checkbix.min.css" rel="stylesheet" type="text/css" />

     <script type="text/javascript">
         Checkbix.init();
    </script>

    <script type="text/javascript">
        $(function () {

            //性别单选按钮
            $("#cb1_sex").click(function () {
                $("#cb2_sex").removeAttr("checked");
                $("#cb1_sex").attr("checked", true);
            });
            $("#cb2_sex").click(function () {
                $("#cb1_sex").removeAttr("checked");
                $("#cb2_sex").attr("checked", true);
            });

            $.ajax({
                type: "post",
                url: "/Ajax/RegisterLoginChangePwdFindPwd.ashx",
                data: { "action": "getQuestion" },
                dataType: "json",
                success: function (data) {
                    $.each(data, function (index, item) {
                        $("#questionSel").append("<option>" + item.QuestionName + "</option>");
                        //alert(item.QuestionName);
                    });
                }
            });

            //------------------用户注册----------------------------------------------------------
            $("#regUsername").focus(function () {
                $("#regUsernameValid").css("display", "none");
            });
            $("#regUsername").focusout(function () {
                if ($("#regUsername").val().length > 0) {
                    $("#regUsernameValid").css("display", "none");
                }
                else {
                    $("#regUsernameValid").html("*账号不得为空");
                    $("#regUsernameValid").css("display", "inherit");
                }
            });

            $("#regPwd").focus(function () {
                $("#regPwdValid").css("display", "none");
            });
            $("#regPwd").focusout(function () {
                if ($("#regPwd").val().length > 0) {
                    $("#regPwdValid").css("display", "none");
                }
                else {
                    $("#regPwdValid").css("display", "inherit");
                }
            });

            $("#regConfirmPwd").focus(function () {
                $("#regConfirmPwdValid").css("display", "none");
            });
            $("#regConfirmPwd").focusout(function () {
                var pwd = $.trim($("#regPwd").val());
                var confirmPwd = $.trim($("#regConfirmPwd").val());
                if (confirmPwd != pwd) {
                    $("#regConfirmPwdValid").html("*两次密码不一致");
                    $("#regConfirmPwdValid").css("display", "inherit");
                }
                if (confirmPwd == 0) {
                    $("#regConfirmPwdValid").html("*确认密码不得为空");
                    $("#regConfirmPwdValid").css("display", "inherit");
                }
            });

            $("#regEmail").focus(function () {
                $("#regEmailValid").css("display", "none");
            });
            $("#regEmail").focusout(function () {
                var email = $.trim($("#regEmail").val());
                if (email.length == 0) {
                    $("#regEmailValid").html("*邮箱不得为空");
                    $("#regEmailValid").css("display", "inherit");
                }
                else {
                    if (!email.match(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/)) {
                        $("#regEmailValid").html("*邮箱格式不正确");
                        $("#regEmailValid").css("display", "inherit");
                    }
                }
            });

            $("#regAnswer").focus(function () {
                $("#regAnswerValid").css("display", "none");
            });
            $("#regAnswer").focusout(function () {
                if ($("#regAnswer").val().length > 0) {
                    $("#regAnswerValid").css("display", "none");
                }
                else {
                    $("#regAnswerValid").html("*请回答问题");
                    $("#regAnswerValid").css("display", "inherit");
                }
            });

            $("#regRegister").click(function () {
                $("#regUsernameValid").css("display", "none");
                $("#regPwdValid").css("display", "none");
                $("#regConfirmPwdValid").css("display", "none");
                $("#regEmailValid").css("display", "none");

                var username = $("#regUsername").val();
                var pwd = $.trim($("#regPwd").val());
                var confirmPwd = $.trim($("#regConfirmPwd").val());
                var email = $.trim($("#regEmail").val());
                var question = $("#questionSel").find("option:selected").text();
                var answer = $.trim($("#regAnswer").val());

                if (username.length == 0) {
                    $("#regUsernameValid").html("*账号不得为空");
                    $("#regUsernameValid").css("display", "inherit");
                }
                if (pwd.length == 0) {
                    $("#regPwdValid").css("display", "inherit");
                }
                if (confirmPwd == 0) {
                    $("#regConfirmPwdValid").html("*确认密码不得为空");
                    $("#regConfirmPwdValid").css("display", "inherit");
                }
                if (confirmPwd != pwd) {
                    $("#regConfirmPwdValid").html("*两次密码不一致");
                    $("#regConfirmPwdValid").css("display", "inherit");
                }
                if (answer.length == 0) {
                    $("#regAnswerValid").html("*请回答问题");
                    $("#regAnswerValid").css("display", "inherit");
                }
                if (email.length == 0) {
                    $("#regEmailValid").html("*邮箱不得为空");
                    $("#regEmailValid").css("display", "inherit");
                }
                else {
                    if (!email.match(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/)) {
                        $("#regEmailValid").html("*邮箱格式不正确");
                        $("#regEmailValid").css("display", "inherit");
                    }
                    else {
                        if (username.length > 0 && pwd.length > 0 && pwd == confirmPwd && answer.length > 0) {
                            var sex = "";
                            if ($("#cb1_sex").attr("checked") == true) {
                                sex = "男";
                            }
                            else {
                                sex = "女";
                            }
                            $.ajax({
                                type: "post",
                                url: "/Ajax/RegisterLoginChangePwdFindPwd.ashx",
                                data: { "action": "register", "username": username, "pwd": pwd,"sex":sex, "email": email, "question": question, "answer": answer },
                                dataType: "json",
                                success: function (data) {
                                    if (data["status"] == "exist") {
                                        $("#regUsernameValid").html("*该账号已存在");
                                        $("#regUsernameValid").css("display", "inherit");

                                    }
                                    if (data["status"] == "success") {
                                        if (confirm("注册成功，是否跳转至登录页面？")) {
                                            location.href = "Login.aspx";
                                        }
                                    }
                                },
                                error: function (err) {
                                    zeroModal.error({
                                        title: '提示',
                                        content: 'Ajax错误1!',
                                        width: '200px',
                                        height: '100px',
                                        //contentDetail: '请选择数据后再进行操作',
                                        okFn: function () {
                                            //回调函数
                                        }
                                    });
                                }
                            });
                        }
                    }
                }
            });

            $("#regClear").click(function () {
                $("#regUsername").val("");
                $("#regPwd").val("");
                $("#regConfirmPwd").val("");
                $("#regEmail").val("");
                $("#regAnswer").val("");
                $("#regUsernameValid").css("display", "none");
                $("#regPwdValid").css("display", "none");
                $("#regConfirmPwdValid").css("display", "none");
                $("#regEmailValid").css("display", "none");
                $("#regAnswerValid").css("display", "none");
                $('#level2').removeClass('pw-weak');
                $('#level2').removeClass('pw-medium');
                $('#level2').removeClass('pw-strong');
                $('#level2').addClass(' pw-defule');
            });

            //密码强度检测
            $('#regPwd').keyup(function () {
                var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
                var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
                var enoughRegex = new RegExp("(?=.{6,}).*", "g");

                if (false == enoughRegex.test($(this).val())) {
                    $('#level2').removeClass('pw-weak');
                    $('#level2').removeClass('pw-medium');
                    $('#level2').removeClass('pw-strong');
                    $('#level2').addClass(' pw-defule');
                    //密码小于六位的时候，密码强度图片都为灰色 
                }
                else if (strongRegex.test($(this).val())) {
                    $('#level2').removeClass('pw-weak');
                    $('#level2').removeClass('pw-medium');
                    $('#level2').removeClass('pw-strong');
                    $('#level2').addClass(' pw-strong');
                    //密码为八位及以上并且字母数字特殊字符三项都包括,强度最强 
                }
                else if (mediumRegex.test($(this).val())) {
                    $('#level2').removeClass('pw-weak');
                    $('#level2').removeClass('pw-medium');
                    $('#level2').removeClass('pw-strong');
                    $('#level2').addClass(' pw-medium');
                    //密码为七位及以上并且字母、数字、特殊字符三项中有两项，强度是中等 
                }
                else {
                    $('#level2').removeClass('pw-weak');
                    $('#level2').removeClass('pw-medium');
                    $('#level2').removeClass('pw-strong');
                    $('#level2').addClass('pw-weak');
                    //如果密码为6为及以下，就算字母、数字、特殊字符三项都包括，强度也是弱的 
                }
                return true;
            });
            //------------------用户注册----------------------------------------------------------
        });
    </script>

     <%--密码强度样式--%>
    <style type="text/css"> 
    /*密码强度*/
    .pw-strength {clear: both;position: relative;top: 8px;width: 170px;}
    .pw-bar{background: url(/images/pwd-1.png) no-repeat;height: 14px;overflow: hidden;width: 179px;}
    .pw-bar-on{background:  url(/images/pwd-2.png) no-repeat; width:0px; height:14px;position: absolute;top: 1px;left: 2px;transition: width .5s ease-in;-moz-transition: width .5s ease-in;-webkit-transition: width .5s ease-in;-o-transition: width .5s ease-in;}
    .pw-weak .pw-defule{ width:0px;}
    .pw-weak .pw-bar-on {width: 60px;}
    .pw-medium .pw-bar-on {width: 120px;}
    .pw-strong .pw-bar-on {width: 179px;}
    .pw-txt {padding-top: 2px;width: 180px;overflow: hidden;}
    .pw-txt span {color: #707070;float: left;font-size: 12px;text-align: center;width: 58px;}
    </style>
    <style type="text/css"> 
      html{ background-color:DeepSkyBlue;}
      .fatherDiv{width:550px;
               height:390px;
               background-color:PowderBlue;
               text-align:center;
               margin:180px auto;}
     .sonSpan{     height :100%;
               display:inline-block;
               vertical-align:middle;}
    .sonDiv{width:530px;
            height:370px;
            background-color:white;
            display:inline-block;
            vertical-align:middle;}
    /* button 
    ---------------------------------------------- */ 
    .button { 
    display: inline-block; 
    zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */ 
    *display: inline; 
    vertical-align: baseline; 
    margin: 0 2px; 
    outline: none; 
    cursor: pointer; 
    text-align: center; 
    text-decoration: none; 
    font: 14px/100% Arial, Helvetica, sans-serif; 
    padding: .5em 1.5em .4em; 
    text-shadow: 0 1px 1px rgba(0,0,0,.3); 
    -webkit-border-radius: .5em; 
    -moz-border-radius: .5em; 
    border-radius: .5em; 
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    } 
    .button:hover { 
    text-decoration: none; 
    } 
    .button:active { 
    position: relative; 
    top: 1px; 
    } 
    
    /* blue */ 
    .blue { 
    color: #d9eef7; 
    border: solid 1px #0076a3; 
    background: #0095cd; 
    background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5)); 
    background: -moz-linear-gradient(top, #00adee, #0078a5); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5'); 
    } 
    .blue:hover { 
    background: #007ead; 
    background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e)); 
    background: -moz-linear-gradient(top, #0095cc, #00678e); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e'); 
    } 
    .blue:active { 
    color: #80bed6; 
    background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee)); 
    background: -moz-linear-gradient(top, #0078a5, #00adee); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee'); 
    } 
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div style=" margin:0 auto;">
    <div class="fatherDiv">
       <span class="sonSpan"></span>
       <div class="sonDiv"><label style=" font-size:30px; margin-top:20px ">用户注册</label>

    <table style=" margin:0 auto;">
      <tr style=" height:30px;">
        <td style=" width:140px"><label>&nbsp;&nbsp;&nbsp;&nbsp; 账号:</label></td>
        <td style=" text-align:left;"><input  type="text" id="regUsername" style=" height:25px; line-height:25px; font-size:16px; width:180px;"/></td>
        <td style=" width:140px;"><label id="regUsernameValid" style=" color:Red; display:none;">*账号不得为空</label></td>
      </tr>
      <tr style=" height:30px;">
        <td><label>&nbsp;&nbsp;&nbsp;&nbsp; 密码:</label></td>
        <td style=" text-align:left;"><input  type="password" id="regPwd" style=" height:25px; line-height:25px; font-size:16px; width:180px;"/></td>
        <td><label id="regPwdValid" style=" color:Red; display:none;">*密码不得为空</label></td>
      </tr >
      <tr style=" height:30px;">
        <td><label>&nbsp;&nbsp; 确认密码:</label></td>
        <td style=" text-align:left;"><input  type="password" id="regConfirmPwd" style=" height:25px; line-height:25px; font-size:16px; width:180px;"/></td>
        <td><label id="regConfirmPwdValid" style=" color:Red; display:none;">*两次密码不一致</label></td>
      </tr>
      <tr>
            <th>
                <br />
            </th>
            <td id="level2" class="pw-strength" style=" height:25px;">
                <div class="pw-bar">
                </div>
                <div class="pw-bar-on">
                </div>
                <div class="pw-txt">
                    <span>弱</span> <span>中</span> <span>强</span>
                </div>
            </td>
        </tr>
        <tr>
          <td style=" height:55px;">性别:</td>
          <td><input id="cb1_sex" type="checkbox" class="checkbix" data-text="男" data-shape="circled" value="man" checked="checked"/>&nbsp;&nbsp;
    <input id="cb2_sex" type="checkbox" class="checkbix" data-text="女" data-shape="circled" data-color="red" value="woman"/></td>
        </tr>
        <tr>
          <td><label>&nbsp;&nbsp;&nbsp;&nbsp; 问题:</label></td>
          <td><select id="questionSel" style=" height:30px; line-height:25px; font-size:16px; width:180px;"></select></td>
        </tr>
        <tr>
          <td><label>&nbsp;&nbsp;&nbsp;&nbsp; 答案:</label></td>
          <td><input  type="text" id="regAnswer" style=" height:25px; line-height:25px; font-size:16px; width:180px;"/></td>
          <td><label id="regAnswerValid" style=" color:Red; display:none;">*请回答问题</label></td>
        </tr>
      <tr style=" height:40px; margin-top:10px;">
        <td><label>&nbsp;&nbsp;&nbsp;&nbsp; 邮箱:</label></td>
        <td style=" text-align:left;"><input  type="text" id="regEmail" style=" height:25px; line-height:25px; font-size:16px; width:180px;"/></td>
        <td><label id="regEmailValid" style=" color:Red; display:none;">*邮箱格式错误</label></td>
      </tr>
      <tr>
      <td></td>
        <td> <input  type="button" id="regRegister" value="注册" class="button blue"/> <input  type="button" id="regClear" value="清除" class="button blue"/></td>
      </tr>
    </table>
    </div>
       <span class="sonSpan"></span>
     </div>
    
    </div>
    </form>
</body>
</html>
